const TEMPlATE_CLASS = `
  <style type="text/css">
    #code-body{
      height: 500px;
      width: 100%;
      display: flex;
      flex-direction: column;
      background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);
      justify-content: center;
      align-items: center;
      color: #000e;
    }
    .code-text{
      font-size: 24px;
      font-weight: 700;
      user-select: none;
      max-width: 80%;
      text-indent: 2em;
    }
    .code-code{
      user-select: all;
      background-color: rgba(0,0,0,.3);
      backdrop-filter: blur(3px);
      text-shadow:2px 2px 4px rgba(255,255,255,.2);
      color: #000;
      padding: 0.25em 0.5em;
      border-radius: 5px;
      display: inline-flex;
      align-content: center;
      text-indent: 0;
      letter-spacing:0.25em;
    }
    svg,code-icon{
      height: 48px;width: 48px;
    }
  </style>
`
export const codeTemplate = ({ code, time, username }) => {
  time = time >= 60 ? `${Math.floor(time / 60)}分钟` : `${time}秒`
  return `
    ${TEMPlATE_CLASS}
    <div id="code-body">
      <p class="code-text" style="display: flex; line-height: 48px;">
        <span>${username}，您好！</span>
      </p>
      <p class="code-text">
        <span>您的验证码是</span>
        <span class="code-code">${code}</span>
        <span>，该验证码将于${time}后失效，请尽快完成当前操作。</span>
      </p>
    </div>
  `
}
